<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_2973804_ddtcz4vvlhg/iconfont.css">
    <style>
       
        .Redmi{
            width: 1535px;
            height: 90px;
            margin: auto;
            background-color: white;
        }
        .Redmi .cent{
            width: 1535px;
            height: 90px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            position: fixed;
            z-index: 3;
            top: 0;
            
        }
          .Redmi .cent .left{
            width: 400px;
            height: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .Redmi .cent .left h2{
            font-size: 30px;
        }
        .Redmi .cent .left a{
            border-left: 1px solid #999999;

        }
        .Redmi .cent .left a span{
            color: #999999;
            padding-left: 20px;
            
        }
        .Redmi .cent .right{
            height: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .Redmi .cent .right a{
            display: flex;
            border-right: 1px solid #999999;
            padding-right: 20px;
        }
       .Redmi .cent .right a:nth-child(6){
            border-right: none;
        }
        .Redmi .cent .right a:nth-child(7){
            width: 152px;
            height: 50px;
            border-right: none;
        }
        .Redmi .cent .right a button{
            width: 152px;
            height: 50px;
            border: none;
            color: white;
            font-size: 20px;
            background-color: orange;
        }
        .Redmi .cent .right a span{
           margin-left: 20px;
           text-align: center;
        }
        .Redmi .cent a:hover{
            color: orange;
        }  
        .top{
            height: 950px;
            width: 1535px;
            position: relative;
            margin: auto;
            
        }
        .top img{
            height:100%;
            position: absolute;
            left: 50%;
           margin-left: -850px;
        }
        .top .wenzi{
            width: 580px;
            height: 220px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            right: 70px;
            top: 400px;
        }
        .top .wenzi h2{
            text-align: center;
            font-size: 46px;
        }
        .chahang{
            width: 1535px;
            height: 220px;
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            
        }
        .chahang h2{
            font-size: 36px;
            padding-top: -10px;
        }
        .next{
            height: 950px;
            width: 1535px;
            /* position: relative; */
            margin: auto;
            
        }
        .next img{
            height:100%;
            /* position: absolute; */
            left: 50%;
           margin-left: -450px;
        }
        .xianshi{
            width: 100%;
            height: 950px;
            background-color: #e8f2f8;
        }
        .xianshi img:nth-child(1){
            width: 100%;
            height: 550px;
        }
        .xianshi img:nth-child(2){
            width: 80%;
            height: 400px;
            margin: auto;
            
        }
    </style>
</head>
<body>
    <header></header>

    <div class="Redmi">
        <div class="cent">
            <div class="left">
                <h2>Redmi 手表2</h2>
                <a href=""><span>Xiaomi Watch Color 2</span></a>
            </div>
            <div class="right">
                <a href=""><span>概述页</span></a>
                <a href=""><span>参数页</span></a>
                <a href=""><span>公交城市</span></a>
                <a href=""><span>F码通道</span></a>
                <a href=""><span>资讯客服</span></a>
                <a href=""><span>用户评价</span></a>
                <a href="xiangqin.html" id="xiang"><button>立即购买</button></a>
            </div>
        </div>
    </div>

    <div class="top">
        <img src="img/huodong/14.jpg" alt="">
        <div class="wenzi">
            <h2>Redmi Watch 2</h2>
            <h3>出手不凡</h3>
            <h4>AMOLED大屏 | 独立卫星定位 | 117种运动模式</h4>
        </div>
    </div>

        <div class="chahang">
            <h2>选择 Redmi Watch 2</h2>
            <h2>10大理由</h2>
        </div>

        <div class="next">
            <img src="img/huodong/183.jpg" alt="">
        </div>

        <div class="xianshi">
            <img src="img/huodong/1.png" alt="">
            <img src="img/huodong/188.png" alt="">
        </div>

        <div class="chahang">
            <h2>多样式息屏表盘</h2>
            <h2>时间时刻留于腕上</h2>
            <h3>腕上精彩不止于海量表盘，还有多款息屏表盘*，不点亮手表屏幕，时间、日期等信息一目了然。</h3>
        </div>

        <div class="top">
            <img src="img/huodong/258.jpg" alt="">
        </div>
        <div class="chahang">
            <h2>全天候睡眠监测</h2>
            <h2>神采焕发，迎接新挑战</h2>
            <h3>睡眠状况如何？ Redmi Watch 2 支持全天候睡眠监测，夜间深睡、浅睡、REM 快速眼动，日间零星小睡，通通都能监测记录。</h3>
        </div>
        <div class="top">
            <img src="img/huodong/489.png" alt="">
        </div>
    <footer></footer>
</body>
</html>
<script src="js/jQuery.js"></script>
<script src="js/ajaxFun.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");

    $(window).scroll(function(){
        let h = $(window).scrollTop();
        if(h>=175){
            $(".Redmi").css({
                display:"block"
            });
        }else{
            $(".Redmi").css({
                display:"none"
            });
        }
    });



    // function getParams(name) {
    //     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    //     var r = decodeURI(window.location.search).substr(1).match(reg);
    //     if (r != null) return unescape(r[2]);
    //     return null;
    // }

    // // console.log(getParams("key"));
    // $.ajax({
    //     url: "./goodsAndShoppingCart/getGoodsInfo.php",
    //     type: "get",
    //     data: {
    //         goodsId: getParams("goodsId")
    //     },
    //     success: function(resText) {
    //         let goodsInfor = JSON.parse(resText);
    //         // $("div").eq(0).html(goodsInfor.key1);
    //         // $("div").eq(1).html(goodsInfor.key2);
    //     for (let i = 0; i < $("#xiang").length; i++) {
    //     $("#xiang").click(function() {
    //         location.href = "xiangqi.html?goodsId=" + $(this).goodsId();
            
    //     });
    // }

    //     }
        
    // });

   
   
</script>